<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<script id="ColorVertexShader" type="x-shader/x-vertex">
    void main(){
        gl_Position=vec4(0,0,0,1);
        gl_PointSize=100.0;
    }
</script>
<script id="ColorFragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    void main(){
        gl_FragColor=vec4(1,1,0,1);
    }
</script>
<script id="vs2" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    attribute vec2 a_Pin;
    varying vec2 v_Pin;
    void main(){
        gl_Position = a_Position;
        v_Pin=a_Pin;
    }
  </script>
<script id="fs2" type="x-shader/x-fragment">
    precision mediump float;
    uniform sampler2D u_Sampler;
    varying vec2 v_Pin;
    void main(){
        gl_FragColor=texture2D(u_Sampler,v_Pin);
    }
</script>
<script type="module">
    import { Matrix4, Vector3, Color, OrthographicCamera, PerspectiveCamera, Spherical } from '../js/three.module.js';
    import { CreateProgram, imgPromise } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';
    import CameraController from '../js/CameraController.js'
    import Poly from '../js/Poly4.js'

    import Geo from '../js/Poly/Geo.js'
    import Mat from '../js/Poly/Mat.js'
    import Obj3D from '../js/Poly/Obj3D.js'
    import Scene from '../js/Poly/Scene.js'



    //#region gl
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 4;

    const gl = canvas.getContext("webgl", { antialias: true, });

    // gl.enable(gl.DEPTH_TEST);//开始背景遮挡会频闪
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);//去图片描边
    //#endregion


    let program = CreateProgram(gl,
        document.querySelector('#ColorVertexShader').innerText,
        document.querySelector('#ColorFragmentShader').innerText);
    let program2 = CreateProgram(gl,
        document.querySelector('#vs2').innerText,
        document.querySelector('#fs2').innerText);


    gl.useProgram(program)

    //创建纹理对象
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
    gl.activeTexture(gl.TEXTURE0);
    let texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(
        gl.TEXTURE_2D,
        gl.TEXTURE_MIN_FILTER,
        gl.LINEAR
    );
    gl.texParameteri(
        gl.TEXTURE_2D,//二维纹理
        gl.TEXTURE_WRAP_T,//纹理容器在t方向的尺寸
        gl.CLAMP_TO_EDGE//边缘加紧的意思
    );
    gl.texParameteri(
        gl.TEXTURE_2D,//二维纹理
        gl.TEXTURE_WRAP_S,//纹理容器在s方向的尺寸
        gl.CLAMP_TO_EDGE//边缘加紧的意思
    );
    gl.texImage2D(
        gl.TEXTURE_2D,
        0,
        gl.RGBA,
        canvas.width,
        canvas.height,
        0,
        gl.RGBA,
        gl.UNSIGNED_BYTE,
        null
    );


    //帧缓冲区(把本次渲染的图像添加到创建的纹理图像中)
    const framebuffer = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
    gl.framebufferTexture2D(
        gl.FRAMEBUFFER,
        gl.COLOR_ATTACHMENT0,
        gl.TEXTURE_2D,
        texture, 0
    );


    //设置渲染尺寸
    gl.viewport(0, 0, canvas.width, canvas.height);

    //绘图
    gl.clearColor(0.4, 0.6, 0.9, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.POINTS, 0, 1);


    a();


    function a() {
        //清空帧缓冲区
        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
        //恢复渲染尺寸
        gl.viewport(0, 0, canvas.width, canvas.height);


        //将刚才画的纹理贴上去
        gl.useProgram(program2)
        const source = new Float32Array([
            -0.5, 0.5, 0, 1,
            -0.5, -0.5, 0, 0,
            0.5, 0.5, 1, 1,
            0.5, -0.5, 1, 0
        ])
        const buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, source, gl.STATIC_DRAW);
        const a_Position = gl.getAttribLocation(program2, 'a_Position');
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 16, 0);
        gl.enableVertexAttribArray(a_Position);
        const a_Pin = gl.getAttribLocation(program2, 'a_Pin');
        gl.vertexAttribPointer(a_Pin, 2, gl.FLOAT, false, 16, 8);
        gl.enableVertexAttribArray(a_Pin);

        gl.bindTexture(gl.TEXTURE_2D, texture)
        const u_Sampler = gl.getUniformLocation(program2, 'u_Sampler')
        gl.uniform1i(u_Sampler, 0)

        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
    }



</script>

</html>